<template>
  <div style="margin-top: 40px">
    <div class="articles-area">
      <el-card style="text-align: left">
        <div v-for="notice in notices" :key="notice.id">
          <notice-cards :notices="notice"></notice-cards>
        </div>
        <el-button type="success" @click="downLoad">下载</el-button>
      </el-card>
    </div>
    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import NoticeCards from '../../../components/home/articleProject/NoticeCards'
import api from '../../../apis/admin/notice'
// eslint-disable-next-line camelcase
import api_u from '../../../apis/common/file'
export default {
  name: 'ArticleIndex',
  components: {NoticeCards},
  data () {
    return {
      notices: [],
      total: 0,
      currentPage: 1,
      pageSize: 5
    }
  },
  mounted () {
    this.loadNotices()
  },
  methods: {
    async downLoad () {
      const response = await api_u.downLoad('http://localhost:9090/api/file/2swnge.jpg')
      const blob = await new Blob([response.data])// new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
      const fileName = response.headers['content-disposition']// 下载文件名称
      const elink = document.createElement('a')// 操作dom创建a标签
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click() // 触发a标签
      URL.revokeObjectURL(elink.href) // 释放URL 对象
    },
    async loadNotices () {
      const result = await api.loadArticles(this.currentPage, this.pageSize, 1)
      this.total = result.data.total
      this.notice = result.data.records
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.loadNotices()
    }
  }
}
</script>

<style scoped>

</style>
